<template>
  <div class="app-container">
    <div class="filter-container">

      <el-input v-model="listQuery.id" placeholder="订单号" style="width: 200px;" class="filter-item"
                @keyup.enter.native="handleFilter"/>
      <el-input v-model="listQuery.userName" placeholder="用户名" style="width: 150px;" class="filter-item"
                @keyup.enter.native="handleFilter"/>
      <el-date-picker v-model="listQuery.startDateStr" value-format="yyyy-MM-dd" type="date" style="width: 140px;"
                      placeholder="开始日期" class="filter-item"/>
      <el-date-picker v-model="listQuery.endDateStr" value-format="yyyy-MM-dd" type="date" style="width: 140px;"
                      placeholder="结束日期" class="filter-item"/>
      <el-select v-model="listQuery.status" placeholder="状态" clearable style="width: 90px" class="filter-item">
        <el-option v-for="(value, key) in statusMap" :key="key" :label="value" :value="key"/>
      </el-select>

      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        搜索
      </el-button>

    </div>

    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="序号" prop="id" align="center" width="80">
        <template slot-scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>

      <el-table-column label="订单ID" prop="id" align="center" width="170px">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>

      <el-table-column label="用户名" prop="id" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.userName }}</span>
        </template>
      </el-table-column>

      <el-table-column label="原价" prop="id" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.totalPrice }}</span>
        </template>
      </el-table-column>

      <el-table-column label="实付价" prop="id" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.actualPrice }}</span>
        </template>
      </el-table-column>

      <el-table-column label="数量" prop="id" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.buyCount }}</span>
        </template>
      </el-table-column>

      <el-table-column label="运费" prop="id" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.expressPrice }}</span>
        </template>
      </el-table-column>

      <el-table-column label="优惠券减免" prop="id" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.couponOffPrice }}</span>
        </template>
      </el-table-column>

      <el-table-column label="状态" class-name="status-col" width="100">
        <template slot-scope="{row}">
          <el-tag :type="row.status | statusStyle">
            {{ row.status | statusFilter }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建日期" width="150px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
        <template slot-scope="scope">

          <el-button type="success" v-if="scope.row.status==2" icon="el-icon-truck" size="small" circle
                     @click="showDialog(scope.row)">
          </el-button>

          <router-link :to="'/order/detail/'+scope.row.id">
            <el-button circle icon="el-icon-view" size="small">
            </el-button>
          </router-link>

<!--          <el-button type="danger" size="small" icon="el-icon-delete" circle-->
<!--                     @click="handleDelete(scope.$index, scope.row.id)">-->

<!--          </el-button>-->
        </template>

      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.curPageNum" :limit.sync="listQuery.pageSize"
                @pagination="getList"/>


    <el-dialog title="发货" :visible.sync="dialogFormVisible" @close="getList">

      <el-form label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">
        <el-form-item label="快递方式" prop="expressType">
          <el-select v-model="expressType" placeholder="快递选择" clearable style="width: 150px" class="filter-item">
            <el-option v-for="(value, key) in expressMap" :key="key" :label="value" :value="key"/>
          </el-select>
        </el-form-item>

        <el-form-item label="快递单号" prop="expressNumber">
          <el-input v-model="expressNumber" />
        </el-form-item>
      </el-form>

      <div slot="footer">
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="confirmDelivery()">
          确认发货
        </el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import {getOrderList, getOrderById, deleteOrder, confirmDelivery} from '@/api/order'
  import waves from '@/directive/waves' // waves directive
  import Pagination from '@/components/Pagination' // secondary package based on el-pagination

  export default {
    name: 'Order',
    components: {Pagination},
    directives: {waves},
    filters: {
      statusStyle(status) {
        const statusStyleMap = {
          '1': 'warning',
          '2': 'danger',
          '3': '',
          '4': 'success',
          '5': 'success',
          '6': 'info'
        }
        return statusStyleMap[status]
      },
      statusFilter(status) {
        const statusMap = {'1': '待付款', '2': '待发货', '3': '已发货', '4': '待评价', '5': '已完成', '6': '已取消'}
        return statusMap[status]
      }
    },
    data() {
      return {
        expressMap: {'1': '中通快递', '2': '申通快递', '3': '圆通快递','0': '无需快递'},
        currentOrderId:null,
        expressNumber:'',
        expressType:'1',
        tableKey: 0,
        list: null,
        listQuery: {
          curPageNum: 1,
          pageSize: 10,
          status: null,
          userName: null,
          startDateStr: null,
          endDateStr: null
        },
        total: 0,
        statusMap: {'1': '待付款', '2': '待发货', '3': '已发货', '4': '待评价', '5': '已完成', '6': '已取消'},
        dialogFormVisible: false
      }
    },

    created() {
      this.getList()
    },
    methods: {
      handleFilter() {
        this.listQuery.curPageNum = 1
        this.getList()
      },

      getList() {
        this.listLoading = true
        getOrderList(this.listQuery).then(r1 => {
          this.list = r1.data.list
          this.total = r1.data.total
          this.listLoading = false
        })
      },

      // handleDelete(index, orderId) {
      //   this.$confirm('确定要删除该订单?', '警告', {
      //     confirmButtonText: '确定',
      //     cancelButtonText: '取消',
      //     type: 'warning'
      //   })
      //     .then(async () => {
      //       await deleteOrder(orderId)
      //       this.list.splice(index, 1)
      //       this.$message({
      //         type: 'success',
      //         message: '删除成功'
      //       })
      //     })
      //     .catch(err => {
      //       console.error(err)
      //     })
      // },

      /**
       * 确认发货的对话框
       **/
      showDialog(row){
        this.expressNumber = ''
        this.currentOrderId = row.id
        this.expressType = '1'
        this.dialogFormVisible = true
      },

      /**
       * 确认发货
       */
      confirmDelivery(){
        let params = {
          expressType : this.expressType,
          orderId: this.currentOrderId,
          expressNumber: this.expressNumber
        }
        confirmDelivery(params).then(r1=>{
          this.dialogFormVisible = false
          this.$notify({
            title: '成功',
            message: '确认发货成功',
            type: 'success',
            duration: 2000
          })
        })
      }

    }
  }
</script>
